<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">地址新建</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm()"
                    >确定</el-button>
                </el-col>
            </el-row>
            <el-form ref="form" :model="form" label-width="100px" class="mt30">
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="收货人:" prop="name">
                            <el-input v-model="form.name" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="手机号:" prop="phone">
                            <el-input v-model="form.phone" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <el-select v-model="form.province" placeholder="请选择" @change="onProvince" class="mr10">
                                <el-option v-for="(item,index) of provinceAddress" :key="index" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                            <span class="mr10">省</span>
                            <el-select v-model="form.city" placeholder="请选择" @change="onCity" class="mr10">
                                <el-option v-for="(item,index) of cityAddress" :key="index" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                            <span class="mr10">市</span>
                            <el-select placeholder="请选择" v-model="form.area" class="mr10" @change="onZone">
                                <el-option v-for="(item,index) of zoneAddress" :key="index" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                            <span class="mr10">区</span>
                            <el-input v-model="form.address" placeholder="" style="width:30%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { addressAdd, memberDetail } from "@/api/system/member/member"
import { province } from '@/commonJs/linkage.js';
export default {
    name: "add",
    data() {
        return {
            form: {
                memberInformationId: '',
                name: '',
                phone: '',
                province: '',
                city: '',
                area: '',
                address: ''
            },
            provinceAddress: [], // 省份列表
            cityAddress: [],
            zoneAddress: [],
        }
    },
    created(){
        this.provinceAddress = province
        this.getDetailData()
    },
    methods: {
        // 获取详情数据
        getDetailData(){
            memberDetail(this.$route.query.data.memberInformationId).then(res => {
                // this.detailData = res.data
                this.form.memberInformationId = res.data.memberInformationId
                this.form.name = res.data.nickName
                this.form.phone = res.data.phone
            })
        },
        // 省份
        onProvince(val){
            this.cityAddress = []
            this.zoneAddress = []
            this.form.city = ''
            this.form.area = ''
            this.form.address = ''
            for (let item of this.provinceAddress) {
                if (val == item.name) {
                    this.cityAddress = item.children
                }
            }
        },
        // 城市
        onCity(val){
            this.zoneAddress = []
            this.form.area = ''
            this.form.address = ''
            for (let item of this.cityAddress) {
                if (val == item.name) {
                    this.zoneAddress = item.children
                }
            }
        },
        // 区/县
        onZone(){
            this.form.address = ''
        },
        // 确定
        submitForm(){
            addressAdd(this.form).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("新建成功")
                    this.$tab.closeOpenPage({ path: "/customer/member/address", query:{ type: 'memberEdit', data: this.$route.query.data} })
                }
            })
        }
    }
}
</script>

<style scoped>
.del{
  color: #ff0000;
  cursor: pointer;
}
::v-deep .el-input .el-input-group__append{
  padding: 0 10px;
}
.more{
  font-size: 30px;
  cursor: pointer;
}
::v-deep .el-dialog__header{
  display: none;
}
.icon-more-position{
  font-size: 22px;
  margin: 0 5px;
  cursor: pointer;
}
</style>